<template>
    <div class="list">
        <div class="header">
            <i class="back iconfont icon-arrow-left" @click="back"></i>
            <div class="title textover1">{{playlist.name}}</div>
        </div>
        <div class="content" >

            <div class="list_msg" >
                <div class="mask" :style="{'background-image':`url(${playlist.coverImgUrl})`}"></div>
                <div class="bottom">
                    <div class="list_pic">
                        <img :src="playlist.coverImgUrl" />
                    </div>
                    <div class="list_detail">
                        <p class="name textover2">{{playlist.name}}</p>
                        <p class="dec textover2">描述 : {{playlist.description}}</p>
                    </div>
                </div>
            </div>
            <div class="playlist" :style="{'paddingBottom':showPlayerBar}">
                <p class="count">共{{playlist.trackCount}}首</p>
                <div v-for="(t,index) in playlist.tracks" :key="t.id">
                    <songs :songdata="{
                        name:t.name,
                        artist:t.ar,
                        album:t.al,index}" 
                        :songlist="playlist.tracks" ></songs>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import songs from "../components/songs.vue";
import { Indicator } from 'mint-ui';
export default {
    created(){
        Indicator.open({
          text: '加载中....',
          spinnerType: 'fading-circle'
        });
        this.axios.get("/playlist/detail",{params:{id:this.$route.query.id}}).then((res)=>{
            this.playlist = res.data.playlist;
            Indicator.close();
        })
    },
    data(){
        return {
            playlist:{name:"歌单"},
        }
    },
    methods:{
        back(){
            this.$router.go(-1);
        }
    },
    components: {
        songs
    },
    computed:{
        showPlayerBar(){
            if(this.$store.state.song.album){
            return "50px";
            }else{

            return "0px";
            }
        }
    }
}
</script>


<style lang="scss" scoped>
    .list{
        height: 100vh;
        position: relative;
        .header{
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            background: #1a1a1a;
            .back,.title{
                display: inline-block;
                vertical-align: middle;
            }
            .back{
                width: 25px;
                font-size: 20px;
            }
            .title{
                width: calc(100% - 50px);
                text-align: center; 
            }
        }
        .content{
            position: absolute;
            top: 50px;
            bottom: 0;
            width: 100%;
            overflow-y: scroll;
        }
        .list_msg{
            position: relative;
            overflow: hidden;
            color:#ffffff;
            .bottom{
                padding:  20px 20px;
            }
            .list_pic,.list_detail{
                display: inline-block;
                vertical-align: top;
            }
            .list_pic{
                width: 35%;
            }
            .list_detail{
                padding: 10px 0 0 10px;
                width: 65%;
                .name{
                    font-size: 18px;
                    margin-bottom: 20px;
                }
                .dec{
                    font-size: 12px;
                }
            }
        }
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center left;
            -webkit-filter: blur(15px) brightness(70%); /* Chrome, Safari, Opera */
            filter: blur(15px) brightness(70%);
            z-index: -1;
        }
        .playlist{
            padding:0 20px;
            overflow-y: scroll;
            .count{
                color: #1a1a1a;
                line-height: 30px;
                font-size: 14px;
            }
        }
    }
</style>
